<template>
	<div>
		<div style="height: 100px" @mouseover="showPlay = true" @mouseout="showPlay = false">
			<router-link target="_blank" :to="'/video/' + videoId">
				<transition>
					<div v-show="showPlay">
						<el-row>
							<el-col class="video_img_shadow" :span="24">
								<div style="text-align: center; margin-top: 15%">
									<el-image :src="require('../assets/img/play.png')"></el-image>
								</div>
							</el-col>
						</el-row>
					</div>
				</transition>
				<el-image style="width: 100%; height: 100%" :src="coverImageUrl"></el-image>
			</router-link>
			<span class="time_label" v-text="second2StrTime(duration)"></span>
		</div>
		<div>
			<router-link style="color: black; text-decoration: none" :to="'/video/' + videoId">
				<span style="display: block" v-text="titleSub(title)">}</span>
			</router-link>
		</div>
	</div>
</template>

<script>
export default {
	name: "VideoListItemSmall",
	props: {
		videoId: Number,
		coverImageUrl: String,
		duration: Number,
		title: String
	},
	data() {
		return {
			showPlay: false
		}
	},
	methods: {
		titleSub(title) {
			if (title.length <= 9) {
				return title;
			}

			return title.substr(0, 6) + "...";
		},
		second2StrTime(secondTime) {
			var hour = parseInt(secondTime / 3600);
			secondTime = parseInt(secondTime % 3600);
			var minute = parseInt(secondTime / 60);
			var second = parseInt(secondTime % 60);
			var res = "";
			if (hour != 0) {
				res += hour;
				res += ":"
			}
			if (minute < 10) {
				res += "0";
			}
			res += minute;
			res += ":";
			if (second < 10) {
				res += "0";
			}
			res += second;
			return res;
		}
	}
}
</script>

<style scoped>
	.video_img_shadow {
		height: 100px;
		position: absolute;
		background-color: rgb(0, 0, 0, .5);
		z-index: 888;
	}

	.time_label {
		float: right;
		position: relative;
		margin-top: -26px;
		color: white;
		background-color: rgb(0, 0, 0, .7);
		padding-top: 1px;
		padding-left: 3px;
		padding-right: 3px;

	}
</style>